<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData" border style="width: 100%;" height="650px">
        <el-table-column prop="userName" label="姓名" align="center"> </el-table-column>
        <el-table-column prop="idCard" label="身份证" align="center"> </el-table-column>
        <el-table-column prop="headPic" label="头像" align="center">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="scope.row.headPic" alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src="scope.row.headPic" style="width: 80px;height: 80px">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center"> </el-table-column>
        <el-table-column prop="address" label="家庭地址" align="center"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="delUser(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <Pagination :pageNum="gather.current" :total="gather.total" :pageSize="gather.size" @sizeChange="sizeChange"
        @currentChange="currentChange"></Pagination>
    </el-row>
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form :model="userForm" :rules="rules" ref="userForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="userForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth" prop="idCard">
          <el-input v-model="userForm.idCard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth" >
          <el-upload class="avatar-uploader" action="/file/uploadUserHead" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" ref="userHeadUrl">
            <img v-if="userHeadUrl" :src="userHeadUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="userForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址" :label-width="formLabelWidth" prop="address">
          <el-input v-model="userForm.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitFrom('userForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
      
<script>
import Pagination from '../../../components/Pagination/pagination.vue'
import { pageList, addCustomerUser } from '@/api/sys/user'
import { uploadUserHead } from '@/api/common/common'

export default {
  components: { Pagination },
  name: "Depart",
  data() {
    return {
      gather: {
        current: 1,//默认第一页
        size: 10,//一页展示10条
        total: 0,
      },
      tableData: [],
      dialogFormVisible: false,
      userForm: {
        deptId: 0,
        headPic: ""
      },
      formLabelWidth: "120px",
      deptTree: [],
      userHeadUrl: '',
      params: {},
      rules: {
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证', trigger: 'blur' },
          { min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 3, max: 13, message: '长度在 13个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入家庭地址', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50个字符', trigger: 'blur' }
        ],
      }
    };
  },
  watch: {},
  mounted() {
    this.queryAll();
  },
  created() { },
  methods: {
    handleAvatarSuccess(res, file) {
      this.userHeadUrl = URL.createObjectURL(file.raw);
      this.userForm.headPic = res.userHeadUrl;
      console.log(this.userForm.headPic)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      var formData=new FormData();
      // 通过append()方法追加数据
      formData.append("file",file);
      uploadUserHead(formData).then(res => {
          if(res.code ===200){
              this.userHeadUrl=res.userHeadUrl;
          }
      });
      return isJPG && isLt2M;
    },
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.gather.current = val;
      this.queryAll(); //调用接口方法
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.gather.size = val;
      this.queryAll(); //调用接口方法
    },
    queryAll() {
      //发送请求到后端获取菜单数据
      pageList(JSON.stringify(this.gather)).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records;
          this.gather.total = res.data.total;
        }
      });

    },
    //新增用户
    submitFrom(userForm) {
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          addCustomerUser(JSON.stringify(this.userForm)).then(res => {
            if (res.code == 200) {
              this.handleClose();
              this.queryAll();
            }
          });
        } else {
          return false;
        }



      });

    },

    //关闭弹窗
    handleClose() {
      this.dialogFormVisible = false;
      //清空表单
      this.clearForm();
    },

    clearForm() {
      this.userForm = {};
      this.userHeadUrl = "";
      this.$refs.tree.setCheckedKeys([]);
    },
    // 部门数据
    queryDeptTree() {
      this.$http
        .get("/sysDepart/queryAll")
        .then((res) => {
          this.deptTree = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //树节点单选 
    handleClick(data, checked, node) {
      if (checked) {
        this.userForm.deptId = data.deptId;
        this.$refs.tree.setCheckedKeys([data.deptId])

      }
    },
    //修改用户
    updateUser(row) {

    },
    //删除用户
    delUser(row) {

    },

  }

};
</script>
      
<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>